<template>
    <Header />
    <div class="slide text-center">
        <el-carousel :interval="5000" indicator-position="outside" v-if="slides.length">
            <el-carousel-item class="carousel-item" v-for="arrays in slides" :key="arrays">
                <div v-for="item in arrays" class="carousel-card">
                    <img :src="`http://localhost/storage/${item.image}`">
                    <h3>{{ item.title }}</h3>
                </div>
            </el-carousel-item>
        </el-carousel>
        <el-skeleton :rows="3" animated v-else />
    </div>
    <div class="content">
        <Post />
        <el-row :gutter="15" class="content_item">
            <el-col :span="18">
                <el-card shadow="never">
                    <template #header>
                        <div class="header-container">
                            <div class="icon-container">
                                <el-icon class="Dish">
                                    <Dish />
                                </el-icon>
                            </div>
                            <div class="text-container">
                                <h3>美食推荐</h3>
                                <p style="color: #aaa; font-size: 13px;">一个高端的美食分享平台</p>
                            </div>
                        </div>
                    </template>
                    <div class="food-list" v-if="foodList.length">
                        <div v-for="(food, index) in foodList" :key="index" class="food-item">
                            <el-card class="food-card">
                                <el-image :src="`http://localhost/storage/${food.image}`"
                                    :preview-src-list="[`http://localhost/storage/${food.image}`]" :zoom-rate="1.2"
                                    :max-scale="7" :min-scale="0.2" :initial-index="0" fit="cover" alt="美食图片"
                                    class="food-image" />
                                <div class="food-details">
                                    <div @click="$router.push({ name: 'foodDetail', params: { id: food.id } })">
                                        <div class="title">
                                            <h2>
                                                {{ food.title }}
                                            </h2>
                                        </div>
                                        <div class="recommendation">
                                            <span>推荐系数:
                                                <el-rate v-model="food.score" disabled show-score text-color="#ff9900"
                                                    :score-template="`${food.score} 分`" />
                                            </span>
                                        </div>

                                    </div>
                                    <div class="favorites">
                                        <span>收藏量：{{ food.collect_count }} </span>

                                        <span>评价人数：{{ food.score_count }}</span>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                    <el-skeleton :rows="6" animated v-else />
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="never">
                    <template #header>
                        <div class="header-container">
                            <div class="icon-container">
                                <el-icon class="Orange">
                                    <Orange />
                                </el-icon>
                            </div>
                            <div class="text-container">
                                <h3>评分排行</h3>
                                <p style="color: #aaa; font-size: 13px;">一个高端的美食分享平台</p>
                            </div>
                        </div>
                    </template>
                    <el-row :gutter="20" v-if="foodLists.length">
                        <el-col v-for="(item, index) in foodLists" :key="index" :span="24">
                            <div class="foods-card"
                                @click="$router.push({ name: 'foodDetail', params: { id: item.id } })">
                                <div slot="header" class="clearfix">
                                    <div class="foods-number">{{ index + 1 }}</div>
                                    <img :src="`http://localhost/storage/${item.image}`" class="foods-image"
                                        alt="Food Image" />
                                </div>
                                <div class="foods-info">
                                    <h3>{{ item.title }}</h3>
                                    <p>{{ item.date }}</p>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-skeleton :rows="6" animated v-else />
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="15" class="content_item">
            <el-col :span="18">
                <el-card shadow="never">
                    <template #header>
                        <div class="header-container">
                            <div class="icon-container">
                                <el-icon class="Management">
                                    <Management />
                                </el-icon>
                            </div>
                            <div class="text-container">
                                <h3>食谱推荐</h3>
                                <p style="color: #aaa; font-size: 13px;">一个高端的美食分享平台</p>
                            </div>
                        </div>
                    </template>
                    <el-row :gutter="20" v-if="recipes.length">
                        <el-col :span="24" v-for="(recipe, index) in recipes" :key="index" class="recipe-item">
                            <el-card shadow="hover" class="recipe-card">
                                <el-row type="flex">
                                    <el-col :span="8" class="recipe-image">
                                        <el-image :src="`http://localhost/storage/${recipe.image}`"
                                            :preview-src-list="[`http://localhost/storage/${recipe.image}`]"
                                            :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="0"
                                            fit="cover" alt="食谱图片" class="recipe-img" />
                                    </el-col>
                                    <el-col :span="16" class="recipe-details">
                                        <div @click="$router.push({ name: 'recipeDetail', params: { id: recipe.id } })">
                                            <div class="recipe-title">
                                                {{ recipe.title }}
                                            </div>
                                            <div>
                                                <el-tag v-for="tag in (recipe.tags || '').split(',')" :key="tag"
                                                    style="margin: 10px 10px 10px 0;">
                                                    {{ tag }}
                                                </el-tag>
                                            </div>
                                            <div class="recipe-summary">功效：{{ recipe.summary }}</div>
                                            <el-divider></el-divider>
                                        </div>
                                        <el-row type="flex" justify="space-between" class="recipe-stats">
                                            <el-col :span="12" class="stats-text">
                                                <span>{{ recipe.collect_count }}人收藏</span> |
                                                <span>{{ recipe.eat_count }}人想吃</span> |
                                                <span>{{ recipe.score_count }}人评价</span>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-skeleton :rows="6" animated v-else />
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="never">
                    <template #header>
                        <div class="header-container">
                            <div class="icon-container">
                                <el-icon class="Coffee">
                                    <Coffee />
                                </el-icon>
                            </div>
                            <div class="text-container">
                                <h3>热门标签</h3>
                                <p style="color: #aaa; font-size: 13px;">一个高端的美食分享平台</p>
                            </div>
                        </div>
                    </template>
                    <div class="tags-container" v-if="tags.length">
                        <el-tag v-for="(tag, index) in tags" :key="index" class="tag-button" type="info" effect="plain">
                            {{ tag }}
                        </el-tag>
                    </div>
                    <el-skeleton :rows="3" animated v-else />
                </el-card>
            </el-col>
        </el-row>
        <Top />
    </div>
    <Footer />
</template>
<style scoped>
/* 轮播图样式 */
.slide {
    width: 1024px;
    margin: 20px auto;
}

.carousel-item {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.carousel-card {
    flex: 1;
    position: relative;
}

.carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-card h3 {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px 20px;
    border-radius: 3px;
}

/* 图标颜色 */
.Dish {
    color: hsl(64, 100%, 50%);
}

.Orange {
    color: orange;
}

.Management {
    color: rgb(7, 246, 182);
}

.Coffee {
    color: #3506f1;
}

.el-icon {
    width: 40px;
    height: auto;
}

.el-icon svg {
    height: 40px;
    width: 40px;
}

/* 内容容器样式 */
.content {
    margin: 0 auto;
    width: 1024px;
}

.content_item {
    margin-bottom: 20px;
}

/* 头部样式 */
.header-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.icon-container {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 美食列表样式 */
.food-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.food-item {
    flex: 1 1 calc(33.333% - 15px);
    /* 每行显示3个美食项 */
    width: calc(33.333% - 15px);
    /* 固定宽度 */
    height: 350px;
    /* 固定高度 */
}

.food-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    /* 卡片高度与 .food-item 一致 */
}

.food-image {
    width: 200px;
    border-radius: 10px;
    height: 150px;
    /* 图片高度固定 */
    object-fit: cover;
    /* 保持图片比例并填充容器 */
}

.food-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-grow: 1;
    /* 剩余空间自动分配给详情部分 */
}

.favorites {
    display: flex;
    line-height: 32px;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.favorites .el-icon {
    width: 16px;
}

.recommendation {
    margin-top: 10px;
}

.title {
    font-size: 22px;
    font-weight: 700;
    margin-top: 10px;
}


/* 评分排行样式 */
.foods-card {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 10px;
    margin-bottom: 2px;
    box-sizing: border-box;
}

.foods-card .clearfix {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.foods-image {
    width: 100px;
    height: 80px;
    margin-right: 15px;
    object-fit: cover;
    border-radius: 10px;
}

.foods-number {
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
    color: white;
    padding: 2px 5px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: bold;
}

.foods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.foods-info h3 {
    font-size: 12px;
    margin: 0;
}

.foods-info p {
    font-size: 8px;
    margin: 5px 0 0;
    color: gray;
}


/* 食谱推荐样式 */
.recipe-item {
    margin-bottom: 20px;
}

.recipe-card {
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
}

.recipe-image {

    position: relative;
}

.recipe-img {

    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.recipe-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
}

.recipe-title {
    font-size: 22px;
    margin-bottom: 5px;
    font-weight: bold;
    margin: 0;
}

.recipe-meta {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}


.recipe-summary {
    font-size: 14px;
    color: #666;
    margin: 5px 0;
}

.stats-text {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
}

.stats-icons {
    flex: unset;
}

.stats-icons i {
    margin: 0 10px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
}

.stats-icons .el-icon {
    width: 16px;
}

.stats-icons i:hover {
    color: #409eff;
}

/* 热门标签样式 */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-button {
    margin: 5px;
    cursor: pointer;
}
</style>
<script setup>

import { ref } from 'vue';
import Footer from '~/components/Footer.vue';
import Header from '~/components/Header.vue';
import Post from '~/components/Post.vue';
import Top from '~/components/Top.vue';
import { getBanner, getfoodList, getfoodLists, getrecipeList, gettags } from '~/api/index';

const slides = ref([]);
const foodList = ref([]);
const foodLists = ref([]);
const recipes = ref([]);
const tags = ref([]);

getBanner().then(res => {
    console.log(res);
    slides.value = res;
});
getfoodList().then(res => {
    console.log(res);
    foodList.value = res;
});
getrecipeList().then(res => {
    console.log(res);
    recipes.value = res;
});
getfoodLists().then(res => {
    console.log(res);
    foodLists.value = res;
});
gettags().then(res => {
    console.log(res);
    tags.value = res;
});

</script>